<template>
  <div class="common-layout" style="height: 100%;width: 100%;">
    <el-container>
      <el-aside :width="isCollapse ? '45px' : '200px'">
        <div style="line-height: 60px;" class="log">KcAdmin</div>
        <el-menu :default-openeds="['1', '3']" :unique-opened="true" id="m1" :collapse="isCollapse"
        active-text-color="blue"
        background-color="#68aef5"
        text-color="#FFFFFF" :collapse-transition="false" router>
          <template :key="item.id" v-for="item in menu">
            <el-menu-item v-if="item.children.length == 0" :index="item.url" >
              <i :class="item.icon" style="margin-right: 1vh;"></i>
              <template #title>{{ item.name }}</template>
            </el-menu-item>
            
            <el-sub-menu :index="item.url" v-else>
              <template #title>
                <i :class="item.icon" style="margin-right: 1vh;"></i>
                <span>{{ item.name }}</span>
              </template>
              
              <div :key="items.id" v-for="items in item.children">
                <el-menu-item-group style="background-color:#68aef5 ;">
                  <el-menu-item :index="items.url">
                    <span>{{ items.name }}</span>
                  </el-menu-item>
                </el-menu-item-group>
              </div>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-aside>
    
      <el-container>
        <el-header>
          <el-row :gutter="0" style="margin-top: 5px;">
            <el-col :span="4">
              <div style="display: flex;float: left;margin: 15px;">
                <el-button @click="toggleCollapse">
                  <el-icon :size="20">
                    <Fold />
                  </el-icon>
                </el-button>
              </div>
            </el-col>

            <el-col :span="20">
              <div style="display: flex;float: right;">
                <el-icon style="margin:15px;">
                  <FullScreen />
                </el-icon>
                <el-icon style="margin:15px;">
                  <Setting />
                </el-icon>
                <el-dropdown style="margin:15px;">
                  <span class="el-dropdown-link">
                    <el-icon>
                      <Bell />
                    </el-icon>
                    <el-badge class="mark" is-dot />
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item class="clearfix">
                        消息
                        <el-badge class="mark" :value="12" />
                      </el-dropdown-item>
                      <el-dropdown-item class="clearfix">
                        通知
                        <el-badge class="mark" :value="3" />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-avatar
                  src="https://ts1.cn.mm.bing.net/th/id/R-C.330e8aad49a917a7352b7b304e7bed33?rik=oEWzIb2z%2bwRxJA&riu=http%3a%2f%2f96845.com%2fuploads%2fallimg%2f220811%2f2-220Q115123U42.jpg&ehk=Ev4Cw9EGLrEZKQF7z62%2fEj5cvoKsF0xecqlUlZLPiWw%3d&risl=&pid=ImgRaw&r=0" />
                <el-dropdown style="margin-top: 15px;">
                  <span class="el-dropdown-link">
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item> <el-icon>
                          <User />
                        </el-icon>{{duser.name}}</el-dropdown-item>
                      <el-dropdown-item><el-icon>
                          <SwitchButton />
                        </el-icon><a href="/logins" class="Aa">退出登录</a></el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-scrollbar style="background-color: rgb(239, 240, 242);">
          <el-main style="overflow: hidden;">
            <el-scrollbar style="padding-right: 15px;">
              <router-view></router-view>
            </el-scrollbar>
          </el-main>
        </el-scrollbar>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { getMyMenus } from '../api/menu/index'
import {getuser} from '../utils/auth'
import '../style/icon.css'
export default defineComponent({
  props: ["menu"],
  setup() {
    const router = useRouter();
    const data = reactive({
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      sizeList: ["large", "medium", "small"],
      isCollapse: false,
      menu: [],
      duser:{
        name:'',
        account:''
      }
    })

    const Route=useRoute();

    onMounted(() => {
      events.getmenu()
      data.duser=JSON.parse(JSON.parse(JSON.stringify(getuser())))
      console.log('-----------------',data.duser)
    })
    const events = {
      toggleCollapse() {
        data.isCollapse = !data.isCollapse
        console.log(111)
      },
      tk() {
        router.push('/exam/question')
      },
      getmenu() {
        getMyMenus({
          menu: data.menu
        }).then((res: any) => {
          data.menu = res.data
          console.log(res)
        })
      },
      sj(){
        router.push('/exam/testpaper')
      },
      sy(){
        router.push('/')
      },
      user(){
        router.push('/organization/user')
      },

    }
    return {
      ...toRefs(data),
      ...events
    }
  },

})
</script>


<style scoped>
.el-header {
  background: linear-gradient(to right, #3f9af5, rgb(248, 241, 242));
  color: #333;
  text-align: center;
  line-height: 60px;
  margin:0px;
  border-bottom: 1px #b3c0d1 solid;
  border-left: 1px #b3c0d1 solid;
  box-shadow: 1px 1px 2px gray;
}

.el-aside {
  background: linear-gradient(#3f9af5, rgb(249, 226, 230));
  text-align: center;
  border-right: 1px pink solid;

  height: 100vh;
}

.el-menu {
  border-right: none;
}

.el-main {
  height: 90vh;
  
  width: 99%;
  margin: auto;
  margin-top: 8px;
  padding: 1vh;
  border-radius: 5px;
  border: 1px white solid;
  background: white;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 1px 5px grey;
}

.log {
  width: 140px;
  /* margin-top: 5px; */
  font-style: italic;
  font-size: 30px;
  margin-left: 15px;
  color: #FFFFFF;
  /* font-family: "Harrington", fantasy, serif, sans-serif; */
  font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
  font-weight: 600;
}

.el-sub-menu {
  background: white;
}


.el-menu-item-group {
  background: white;
}

#c1 {
  background-color: #ebeef1
}

.Aa {
  text-decoration: none;
  color: #333;
}

</style>
